<template>
  <div>
    <h4>vant基本使用</h4>
    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <!-- <div class="box"></div> -->
    <!-- 使用字体图标 -->
    <!-- 建议 -->
    <div>字体图标</div>
    <i class="iconfont iconbianzu3" style="font-size:30px"></i>
    <div>单元格使用</div>
    <van-cell-group>
      <van-cell title="左侧信息" value="右侧信息" label="描述信息" />
      <van-cell title="单元格" is-link />
      <van-cell title="单元格" is-link value="内容" />
      <van-cell title="单元格" is-link arrow-direction="down" value="内容" />
    </van-cell-group>
    <div>单元格插槽使用</div>
    <van-cell value="内容" is-link>
      <!-- 使用 title 插槽来自定义标题 -->
      <!-- 左侧单元格 -->
      <template #title>
        <span class="custom-title">单元格</span>
        <van-tag type="danger">标签</van-tag>
      </template>
      <!-- 右侧单元格 -->
      <template #default>
        <span class="custom-title">右侧</span>
        <van-tag type="danger">标签</van-tag>
      </template>
      <!-- 右侧图标 -->
      <template #right-icon>
        <van-icon name="search" class="search-icon" />
      </template>
    </van-cell>
    <!-- 导航组件栏使用 -->
    <div>导航栏组件使用</div>
    <!-- <van-nav-bar
      title="标题"
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    /> -->
    <van-nav-bar
      title="标题"
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <!-- 表单使用 -->
    <div>表单使用</div>
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  data () {
    return {
      // 表单属性
      username: '',
      password: ''
    }
  },
  methods: {
    // 表单方法
    onSubmit (values) {
      console.log('submit', values)
    },
    // 单元格方法
    onClickLeft () {
      Toast('返回')
    },
    onClickRight () {
      Toast('按钮')
    }
  }
}
</script>

<style lang="less" scoped>
// 导入全局lees样式
// @import url('../style/global.less');
.box {
  width: 100px;
  height: 100px;
  margin-top: 5px;
  background-color: @color;
}
// 单元格样式
.custom-title {
  margin-right: 4px;
  vertical-align: middle;
}

.search-icon {
  font-size: 16px;
  line-height: inherit;
}
</style>
